<template>
	<div class="logo">{{ isCollapse ? 'M' : projectInfo.name }}</div>
	<el-menu router class="el-menu-vertical-demo" active-text-color="#409eff" background-color="#304156"
		text-color="#fff" :default-active="activeMenu.path" :collapse="isCollapse">
		<SubMenu v-for="item in menu" :key="item.path" :itemConfig="item" />
	</el-menu>
</template>

<script setup lang="ts">
import { menu } from '@/router/menu';
import SubMenu from './SubMenu.vue';
import { toRefs } from 'vue';
import { useMainStore } from '@/stores';
const store = useMainStore();
const { activeMenu, isCollapse, projectInfo } = toRefs(store);
</script>

<style lang="scss" scoped>
.logo {
	height: 80px;
	text-align: center;
	line-height: 80px;
	color: #fff;
	font-size: 30px;
	font-weight: bold;
	background: #304156;
	overflow: hidden;
}

.el-menu-vertical-demo {
	height: calc(100% - 80px);
	border-right: none;
}
</style>